:global {
  .btn {
    width: 100%;
    height: 100%;
  }
  .mui-switch {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 20px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
    &:after {
      content: "开";
      position: absolute;
      top: 11px;
      right: 25%;
      color: #000;
    }
  }
  .mui-switch:before {
    content: '关';
    text-align: center;
    line-height: 37px;
    width: 50%;
    height: calc( ~ '100% - 2px');
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  .mui-switch:checked {
    &:after {
      content: "关";
      position: absolute;
      top: 11px;
      left: 25%;
    }
    &:before {
      content: "开";
      color: #fff;
      text-align: center;
      line-height: 37px;
      border-color: #1890ff; // /*颜色修改*/
      box-shadow: #1890ff 0 0 0 16px inset; // /*颜色修改*/
      background-color: #1890ff;
    }
  }
  .mui-switch:checked:before {
    left: 50%;
  }
  .mui-switch.mui-switch-animbg {
    /*加过度效果*/
    transition: background-color ease 0.4s;
  }
  .mui-switch.mui-switch-animbg:before {
    transition: left 0.3s;
  }
  .mui-switch.mui-switch-animbg:checked {
    // box-shadow: #1890ff 0 0 0 0 inset;
    /*颜色修改*/
    // background-color: #1890ff;
    transition: border-color 0.4s, background-color ease 0.4s;
  }
}